<template>
  <view>
    <u-popup :show="show" @close="cancelHandle">
      <view class="warpper">
        <view class="warpper__header">
          <view class="warpper__header__left" @click="cancelHandle">
            {{ $t("index.Cancel") }}
          </view>
          <view class="warpper__header__title">
            {{ title }}
          </view>
          <view class="warpper__header__right" @click="DoneHandle">
            {{ $t("index.Done") }}
          </view>
        </view>
        <view class="warpper__container">
          <view
            class="warpper__container__item"
            v-for="(item, index) in option"
            @click="selectChange(item)"
            :key="index"
          >
            <text>{{ item[labelSigned] }}</text>
            <view
              class="iconfont icon-duigou my-icon"
              v-if="currentValue === item[valueSigned]"
            ></view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "SelectPopup",
  props: {
    show: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: "Language",
    },
    option: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: "",
    },
    labelSigned: {
      type: String,
      default: "label",
    },
    valueSigned: {
      type: String,
      default: "value",
    },
  },
  data() {
    return {
      currentValue: "",
    };
  },
  mounted() {
    this.currentValue = this.value;
    console.log("value", this.currentValue);
  },
  methods: {
    cancelHandle() {
      this.$emit("update:show", false);
    },
    DoneHandle() {
      this.$emit("finish", this.currentValue);
      this.$emit("update:show", false);
    },
    selectChange(item) {
      this.currentValue = item[this.valueSigned];
    },
  },
};
</script>

<style lang="scss" scoped>
.warpper {
  background: #f6f6f6;
  overflow: hidden;
  border-radius: 50rpx 50rpx 0px 0px;

  &__header {
    display: flex;
    align-items: center;
    height: 110rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // background: #F6F6F6;

    &__left {
      flex: 0 0 200rpx;
      padding-left: 30rpx;
      color: #878787;
    }

    &__title {
      flex: 1;
      text-align: center;
      font-size: 34rpx;
      font-weight: 500;
      color: #000000;
    }

    &__right {
      flex: 0 0 200rpx;
      text-align: right;
      padding-right: 30rpx;
      color: #61bdb2;
    }
  }

  &__container {
    background-color: #fff;
    max-height: 750rpx;
    overflow: auto;
    font-size: 30rpx;
    padding-bottom: 50rpx;

    &__item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      height: 110rpx;
      border-bottom: 2rpx solid #f6f6f6;

      .my-icon {
        font-size: 42rpx;
        color: #61bdb2;
      }
    }
  }
}

/deep/ .u-popup__content {
  background: #f6f6f6;
  border-radius: 50rpx 50rpx 0px 0px;
}
</style>
